<template>
	<view>
		<search-slot>
			<template #left>
				<view class="search-left text-center">

				</view>
			</template>
			<template #center>
				<view class="flex-1 search-center text-center">购物车</view>
			</template>
			<template #right>
				<view class="search-right text-center" @click="changeEdit">
					<text class="" v-if="isEdit">编辑</text>
					<text class="" v-else>完成</text>
				</view>
			</template>
		</search-slot>

		<template v-if="isListShow">
			<view class="py-5 d-flex a-center j-center bg-white">
				<view class="iconfont icon-gouwuche text-light-muted" style="font-size: 50rpx;"></view>
				<text class="text-light-muted mx-2">购物车还是为空</text>
				<view class="px-2 py-1 border border-light-secondary rounded" hover-class="bg-light-secondary">
					去逛逛
				</view>
			</view>
		</template>
		<template v-else>
			<view class="d-flex a-center py-3 border-bottom border-light-secondary" v-for="(item,index) in list" :key="index">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 80rpx;height: 80rpx;" @click="selectItem(index)"
					>
					<radio color="#FD6801"  :checked="item.checked"/>
				</label>
				<image :src="item.cover" mode="widthFix" style="height: 150rpx;width: 150rpx;"
					class="border border-light-secondary rounded p-2 flex-shrink">
				</image>
				<view class="flex-1 d-flex flex-column pl-2">
					<view class="text-dark" style="font-size: 35rpx;">
						{{item.title}}
					</view>
					<view class="d-flex text-light-muted mb-1">
							<text class="my-1">
							{{item.skusText}}
						</text>
					</view>
					<view class="mt-auto d-flex j-sb">
						<text slot="newprice" style="color: #f60;">￥{{item.pprice}}</text>
						<view class="a-self-end">
							<uni-number-box  :min="0" :max="10"  v-model="item.num" @change="changeNum($event,item)"></uni-number-box>
						</view>
					</view>
				</view>

			</view>
			<view class="py-5"></view>
		</template>

		<template v-if="isEdit">
			<view
				class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
				style="height: 100rpx;z-index: 100;">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;" @click="doSelectAll">
					<radio color="#FD6801" :checked="checkedAll" :disabled="isListShow"></radio>
				</label>
				<view class="flex-1 d-flex a-center j-center font-md" style="background:#fff;">
					合计:
					<text slot="newprice" style="color: #f60;font-weight: 900;">{{totalPrice}}</text>
				</view>
				<view class="flex-1 d-flex a-center j-center main-bg-color text-white font-md"
					hover-class="main-bg-hover-color">
					结算
				</view>
			</view>
		</template>
		<template v-else>
			<view
				class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
				style="height: 100rpx;z-index: 100;">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;" @click="doSelectAll">
					<radio color="#FD6801" :checked="checkedAll" :disabled="isListShow"></radio>
				</label>
				<view class="flex-1 d-flex a-center j-center font-md main-bg-color text-white">
					移入收藏
				</view>
				<view class="flex-1 d-flex a-center j-center bg-danger text-white font-md"
					hover-class="main-bg-hover-color" @click="doDelSelect">
					删除
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
	export default {
		data() {
			return {
				isEdit:true
			}
		},
		computed:{
			...mapState({
				list:state=>state.cart.list
			}),
			...mapGetters(['checkedAll','totalPrice','isListShow'])
			
		},
		methods: {
			...mapMutations(['selectItem']),
			...mapActions(['doSelectAll','getcartlist','doDelSelect']),
			changeEdit(){
				this.isEdit = !this.isEdit
			},
			changeNum(e,item){
				console.log(e,item);
				item.num = e;
			}
		},
		mounted() {
			// uni.$on('updatecartlist',()=>{
			// 	this.getcartlist()
			// })
			// let token = uni.getStorageSync('token')||''
			// if(token){
			// 	 this.getcartlist()
			// }else {
			// 	return;
			// }
			
		}
	}
</script>

<style>

</style>
